<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>attempt counter v.2</title>
    <style>
        body {
            background-color: #000000;
            font-family: sans-serif;
        }

        /* 文字渐变效果 */
        .gradient-text {
            background: linear-gradient(to right, #ff7e5f, #feb47b); /* 渐变颜色 */
            background-clip: text;
            color: transparent; /* 文字颜色透明 */
            font-weight: bold;
        }

        h1 {
            text-align: center;
            font-size: 50px;
        }

        .count-display {
            text-align: center;
            font-size: 40px;
            color: #f4f4f9;
        }

        h3 {
            text-align: center;
            color: #717178;
            font-size: 20px;
            font-weight: normal;
        }
    </style>
</head>
<body>
    <br><br><br><br><br>
    <h1 class="gradient-text">ATTEMPT COUNTER</h1>
    <div class="count-display"> 0 times </div>
    <!--每次增加的时候会有一个颜色暂时变化的动效，-->
    <!--减少的时候也有，但是颜色不同-->
    <br><br>
    <h3><strong>Press alt + = twice</strong> to add 1, <strong>alt + - twice</strong> to minus 1</h3>
    <script>
        let count = 0;
        let addTrigger = false;
        let minusTrigger = false;

        const countDisplay = document.querySelector('.count-display');

        // 更新计数显示
        function updateCountDisplay() {
            countDisplay.textContent = `${count} times`;
        }

        // 键盘事件监听
        document.addEventListener('keydown', (event) => {
            if (event.altKey && event.key === '=') {
                // Ctrl + =
                if (!addTrigger) {
                    addTrigger = true;
                    return;
                }
                count++;
                updateCountDisplay();
                addTrigger = false;
            } else if (event.altKey && event.key === '-') {
                // Ctrl + -
                if (!minusTrigger) {
                    minusTrigger = true;
                    return;
                }
                if (count > 0) {
                    count--;
                }
                updateCountDisplay();
                minusTrigger = false;
            }
        });
    </script>
</body>
</html>
